<html lang="zh" xmlns:th="http://www.thymeleaf.org">
	<head>
		<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
		<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
		<style type="text/css">
			.school{
				font-size: 55.5px;
				font-weight: bold;
				font-family:"楷体","楷体_GB2312";
			}
			.name{
				font-size: 34px;
				font-weight: bold;
				font-family: "仿宋", "仿宋_GB2312";
				margin-top: 4%;
			}
			.head{
				font-size: 22.4px;
				font-family: "仿宋", "仿宋_GB2312";
				margin-top: 2%;
				margin-left: 10%;
			}
			.head-val{
				text-decoration:underline
			}
			.paper{
				font-family: SimSun;
				font-size: 22.4px;
				margin-left: 1%;
			}
			td {
				text-align:center;
				height: 50px;
				width: 14.2%;
			}
		</style>
	</head>
	<body id="content">
		<div style="margin-top: 3%;">
			<div class="layui-col-md1" style="height: 1780px;">
				<img alt="腰封" src="/answer.png" height="1780px" width="80%">
			</div>
			<!-- 试卷信息 -->
			<div class="layui-col-md10">
				<!-- 学校 -->
				<div align="center" class="school" th:text="${paper.school}">
				</div>
				<!-- 试卷名称 -->
				<div align="center" class="name" th:text="${paper.name}">
				</div>
				<!-- 试卷头部信息 -->
		        <div class="head">
		        	<div class="layui-row">
		        		<div class="layui-col-xs4">
		        			<span>考试课程：</span>
		        			<!--<span class="head-val" th:text="${'&nbsp;&nbsp;&nbsp;'+answer.courseName+'&nbsp;&nbsp;&nbsp;'}"></span>	-->
		        			<span class="head-val" th:text="${'&nbsp;&nbsp;&nbsp;'+paper.name+'&nbsp;&nbsp;&nbsp;'}"></span>
		        		</div>
		        		<div class="layui-col-xs4">
		        			<span>考试类型：</span>
							<td th:switch="${paper.type}">
								<span  class="head-val" th:case="0">平时考试</span>
								<span  class="head-val" th:case="1">期中</span>
								<span  class="head-val" th:case="2">期末</span>
							</td>
		        			<!--<span class="head-val">&nbsp;&nbsp;&nbsp;<span th:text="${paper.type}"></span>&nbsp;&nbsp;&nbsp;</span>-->
		        		</div>
		        		<div class="layui-col-xs4">
		        			<span>考试形式：</span>
		        			<span class="head-val">&nbsp;&nbsp;&nbsp;<span th:text="${paper.form}"></span>&nbsp;&nbsp;&nbsp;</span>
		        		</div>
		        	</div>
		        	<div class="layui-row">
		        		<div class="layui-col-xs5">
		        			<span>考试院系：</span>
		        			<span class="head-val">&nbsp;&nbsp;&nbsp;<span th:text="${paper.department}"></span>&nbsp;&nbsp;&nbsp;</span>
		        		</div>
		        		<div class="layui-col-xs4">
		        			<span>年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;级：</span>
		        			<span class="head-val">&nbsp;&nbsp;&nbsp;<span th:text="${paper.clazz}"></span>&nbsp;&nbsp;&nbsp;</span>
		        		</div>
		        		<div class="layui-col-xs3">
		        			<span>试&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;卷：</span>
		        			<span class="head-val">&nbsp;&nbsp;&nbsp;B&nbsp;&nbsp;&nbsp;</span>
		        		</div>
		        	</div>
		        </div>
		        <hr class="layui-bg-black" style="font-weight: bold;">
		        <!-- 答题卡 -->
		        <div>
		        	<table border="1" style="width: 100%;margin-top: 2%;">
		        		<tr>
		        			<td>题号</td>
		        			<td>一</td>
		        			<td>二</td>
		        			<td>三</td>
		        			<td>四</td>
		        			<td>五</td>
		        			<td>总分</td>
		        		</tr>
		        		<tr>
		        			<td>得分</td>
		        			<td></td>
		        			<td></td>
		        			<td></td>
		        			<td></td>
		        			<td></td>
		        			<td></td>
		        		</tr>
		        	</table>
		        </div>
			</div>
			<!-- 试卷题目 -->
			<!-- 单项选择题 -->
			<div class="layui-col-md8 paper" style="margin-top: 2%;margin-left: 2%;">
				<img alt="题目" src="/topic.png">
				<span>1. 单项选择题</span>
			</div>
			<div class="layui-col-md8 paper" th:each="oneChoice, status : ${paper.oneChoices}" style="margin: 1%;">
				<div class="layui-col-xs12">
					<span th:text="${status.count} + '.&nbsp;'"></span>
					<span th:text="${oneChoice.question}"></span>
					(<span th:text="${oneChoice.score}"></span>分)
				</div>
				<div class="layui-col-xs6">
					<div><span>A.&nbsp;</span><span th:text="${oneChoice.aa}"></span></div>
					<div><span>B.&nbsp;</span><span th:text="${oneChoice.ab}"></span></div>
					<div><span>C.&nbsp;</span><span th:text="${oneChoice.ac}"></span></div>
					<div><span>D.&nbsp;</span><span th:text="${oneChoice.ad}"></span></div>
					<div>
						<!--<span>答</span>
						<span th:text="${answer.content['o_' + oneChoice.id]}"></span>-->
					</div>
				</div>
				<div class="layui-col-xs6">
					<div th:if="${oneChoice.isImage}"><img height="100px" width="100px" alt="图" th:src="@{'http://192.168.0.105/image/TestSystem/paper/oneChioce/' + ${oneChoice.id} + '.jpg'}"></div>
				</div>
			</div>
			<!-- 多项选择题 -->
			<div class="layui-col-md8 paper">
				<img alt="题目" src="/topic.png">
				<span>2. 多项选择题</span>
			</div>
			<div class="layui-col-md8 paper" th:each="multipleChoice, status : ${paper.multipleChoices}" style="margin: 1%;">
				<div class="layui-col-xs12">
					<span th:text="${status.count} + '.&nbsp;'"></span>
					<span th:text="${multipleChoice.question}"></span>
					(<span th:text="${multipleChoice.score}"></span>分)
				</div>
				<div class="layui-col-xs6">
					<div><span>A.&nbsp;</span><span th:text="${multipleChoice.aa}"></span></div>
					<div><span>B.&nbsp;</span><span th:text="${multipleChoice.ab}"></span></div>
					<div><span>C.&nbsp;</span><span th:text="${multipleChoice.ac}"></span></div>
					<div><span>D.&nbsp;</span><span th:text="${multipleChoice.ad}"></span></div>
					<div>
						<!--<span>答</span>
						<span th:each="ma,status : ${answer.content['m_' + multipleChoice.id]}">
							<span th:text="${ma}"></span>
							<span th:if="${status.count < answer.content['m_' + multipleChoice.id].size()}">,</span>
						</span>-->
					</div>
				</div>
				<div class="layui-col-xs6">
					<div th:if="${multipleChoice.isImage}"><img height="100px" width="100px" alt="图" th:src="@{'http://192.168.0.105/image/TestSystem/paper/multipleChoice/' + ${multipleChoice.id} + '.jpg'}"></div>
				</div>
			</div>
			<!-- 判断题 -->
			<div class="layui-col-md8 paper">
				<img alt="题目" src="/topic.png">
				<span>3. 判断题</span>
			</div>
			<div class="layui-col-md8 paper" th:each="judgment, status : ${paper.judgments}" style="margin: 1%;">
				<div>
					<span th:text="${status.count} + '.&nbsp;'"></span>
					<span th:text="${judgment.question}"></span>(&nbsp;&nbsp;)
					(<span th:text="${judgment.score}"></span>分)
				</div>
				<!--<span th:switch="${answer.content['j_' + judgment.id]}">
					<span>答</span>
					<span th:case="1">√</span>
					<span th:case="0">×</span>
				</span>-->
			</div>
			<!-- 填空题 -->
			<div class="layui-col-md8 paper">
				<img alt="题目" src="/topic.png">
				<span>4. 填空题</span>
			</div>
			<div class="layui-col-md8 paper" th:each="fullInTheBlank, status : ${paper.fullInTheBlanks}" style="margin: 1%;">
				<div class="layui-col-xs12">
					<span th:text="${status.count} + '.&nbsp;'"></span>
					<span th:text="${fullInTheBlank.question}"></span>
					(<span th:text="${fullInTheBlank.score}"></span>分)
				</div>
				<div class="layui-col-xs6">
					<!--<span>答</span>
					<span th:text="${answer.content['f_' + fullInTheBlank.id]}"></span>-->
				</div>
				<div class="layui-col-xs6">
					<div th:if="${fullInTheBlank.isImage}"><img height="100px" width="100px" alt="图" th:src="@{'http://192.168.0.105/image/TestSystem/paper/fullInTheBlank/' + ${fullInTheBlank.id} + '.jpg'}"></div>
				</div>
			</div>
			<!-- 简答题 -->
			<div class="layui-col-md8 paper">
				<img alt="题目" src="/topic.png">
				<span>5. 简答题</span>
			</div>
			<div class="layui-col-md8 paper" th:each="discussion, status : ${paper.discussions}" style="margin: 1%;">
				<div class="layui-col-xs12">
					<span th:text="${status.count} + '.&nbsp;'"></span>
					<span th:text="${discussion.question}"></span>
					(<span th:text="${discussion.score}"></span>分)
				</div>
				<div class="layui-col-xs12" style="height: 100px;margin-top: 1%;">
					<!--<div class="layui-col-xs6">
						<span th:text="${answer.content['d_' + discussion.id]}"></span>
					</div>-->
					<div class="layui-col-xs6">
						<div th:if="${discussion.isImage}"><img height="100px" width="100px" alt="图" th:src="@{'http://192.168.0.105/image/TestSystem/paper/discussion/' + ${discussion.id} + '.jpg'}"></div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
	 html2canvas($("#content"), {
         background: "#fff",
         allowTaint: true,
         taintTest: false,
         onrendered:function(canvas) {
             var contentWidth = canvas.width;
             var contentHeight = canvas.height;
             var pageHeight = contentWidth / 592.28 * 841.89;
             var leftHeight = contentHeight;
             var position = 0;
             var imgWidth = 595.28;
             var imgHeight = 592.28/contentWidth * contentHeight;
             var pageData = canvas.toDataURL('image/jpeg', 1.0);
             var img = new Image();
             img.src = pageData;
             var pdf = new jsPDF('p', 'pt', 'a4');
             img.onload = function() {
                 if (leftHeight < pageHeight) {
                     pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );
                 } else {
                     while(leftHeight > 0) {
                         pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                         leftHeight -= pageHeight;
                         position -= 841.89;
                         if(leftHeight > 0) {
                             pdf.addPage();
                         }
                     }
                 }
                 var name = $(".name").text();

                 var sname = '';
                 pdf.save(name + '_' + sname + '.pdf');
             }
         },
     })
	</script>
</html>